<template>
  <el-dialog :title="title" v-model="visible" class="dialog-md" append-to-body @close="visible = false">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" v-loading="loading">
      <el-row>
        <el-col :span="12">
          <el-form-item label="公告标题" prop="title">
            <el-input v-model="form.title" placeholder="请输入公告标题" maxlength="64" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公告类型" prop="type">
            <el-select v-model="form.type" placeholder="请选择">
              <el-option v-for="dict in sys_notice_type" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{
                dict.label
              }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="内容">
            <editor v-model="form.content" :min-height="192" type="base64" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="dialog-footer">
      <el-button class="medium" type="primary" :loading="submitting" :disabled="loading" @click="handleSubmit"
        >确 定</el-button
      >
      <el-button class="medium" @click="visible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script setup name="NoticeForm">
  import { infoNoticeApi, addNoticeApi, editNoticeApi } from '@/api/system/notice'
  import Editor from '@/components/Editor/index.vue'

  const props = defineProps({ row: Object, moduleName: String })
  const visible = defineModel()
  const { proxy } = getCurrentInstance()

  const form = ref({
    title: undefined,
    type: undefined,
    status: '1',
    content: undefined
  })
  const rules = ref({
    title: [{ required: true, message: '公告标题不能为空', trigger: 'blur' }],
    type: [{ required: true, message: '公告类型不能为空', trigger: 'change' }]
  })

  const { sys_notice_type, sys_normal_disable } = proxy.useDict('sys_notice_type', 'sys_normal_disable')

  // 初始信息
  const title = ref('')
  const loading = ref(false)
  onMounted(async () => {
    loading.value = true
    form.value.id = props.row?.id || undefined
    if (form.value.id) {
      title.value = '编辑' + props.moduleName
      await getRowData()
    } else {
      title.value = '新增' + props.moduleName
    }
    loading.value = false
  })

  // 获取信息
  async function getRowData() {
    try {
      const { info } = await infoNoticeApi(form.value.id)
      form.value = proxy.dataToForm(form.value, info)
    } catch (error) {
      console.log('InfoApi error', error)
      visible.value = false
    }
  }

  // 提交按钮
  const submitting = ref(false)
  const formRef = useTemplateRef('formRef')
  const emit = defineEmits(['submit'])
  async function handleSubmit() {
    try {
      const valid = await formRef.value.validate()
      if (!valid) return
    } catch (error) {
      return
    }
    if (submitting.value) return
    submitting.value = true
    try {
      await proxy.$modal.confirm('确定提交表单数据？')
      if (form.value.id) {
        await editNoticeApi(form.value)
      } else {
        await addNoticeApi(form.value)
      }
      emit('submit')
      proxy.$modal.msgSuccess('操作成功')
      visible.value = false
    } catch (e) {
      console.log('saveApi error', e)
      submitting.value = false
    }
  }
</script>
